<template>
	<view class="content">
		<image ondragstart="return false" class="logo" src="https://waibi.oss-cn-chengdu.aliyuncs.com/2020-06-01/head.jpg"></image>
		<el-row>
			<el-col>
				<el-input placeholder="用户名" v-model="user.username" clearable></el-input>
			</el-col>
		</el-row>
		<el-row>
			<el-col>
				<el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
			</el-col>
		</el-row>
		<el-row>
			<el-col>
				<el-button-group>
					<el-button class="loginBtn" type="primary" @click="register">注册</el-button>
					<el-button class="loginBtn" type="primary" @click="login">登陆</el-button>
				</el-button-group>
			</el-col>
		</el-row>
	</view>
</template>

<script>
	import api from '../../static/common/util/api.js';
	export default {
		data() {
			return {
				user: {
					username: '',
					password: ''
				}
			}
		},
		onLoad() {

		},
		methods: {
			login() {
				api.post(api.API_LOGIN,this.user,(data)=>{
					uni.showToast({
						title: data.msg,
						icon: 'success',
						duration: 2000
					});
					uni.setStorageSync('token', data.token);
				})
			},
			register() {
				api.post(api.API_REGISTER,this.user,(data)=>{
					uni.showToast({
						title: data.msg,
						icon: 'success',
						duration: 2000
					});
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.loginBtn {
		margin-top: 20rpx;
	}
</style>
